<%@ page import="org.clipjoint.enums.GameTypeEnum" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <style type="text/css">
        .layui-form-select {
            z-index: 99999 !important;
        }
    </style>
</head>

<body>
<div class="layui-container">

    <%-- 添加表单 --%>
    <form class="layui-form" style="margin-top: 50px;">
        <input type="hidden" name="id" value="${ game.id }"/>
        <div class="layui-form-item">
            <label class="layui-form-label">游戏名</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="${ game.name }" lay-verify="required" lay-reqText="游戏名不能为空"
                       autocomplete="off"
                       placeholder="请输入游戏名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">游戏昵称</label>
            <div class="layui-input-block">
                <input type="text" name="nickname" value="${ game.nickname }" lay-verify="required" lay-reqText="游戏昵称不能为空"
                       autocomplete="off"
                       placeholder="请输入游戏昵称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类别</label>
            <div class="layui-input-block">
                <select name="type">
                    <option value=""></option>
                    <c:forEach items="${ GameTypeEnum.values() }" var="type">
                        <option value="${ type.name() }" ${ game.type eq type.name() ? "selected" : "" }
                                }>${ type.name() }</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原价格</label>
            <div class="layui-input-block">
                <input type="text" name="preprice" value="${ game.preprice }" lay-verify=" required "
                       lay-reqText="原价格不能为空" autocomplete="off"
                       placeholder="请输入原价格" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">折扣</label>
            <div class="layui-input-block">
                <input type="text" name="off" value="${ game.off }" lay-verify=" required" lay-reqText="折扣不能为空"
                       autocomplete="off"
                       placeholder="请输入折扣" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">游戏价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" value="${ game.price }" lay-verify=" required" lay-reqText="游戏价格不能为空"
                       autocomplete="off"
                       placeholder="请输入游戏价格" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原主图</label>
            <div class="layui-input-block">
                <c:if test="${ game.image eq null or game.image eq '' }">
                    <input type="text" class="layui-input" value="暂无主图" readonly>
                </c:if>
                <c:if test="${ game.image ne null and game.image ne '' }">
                    <img src="${ game.image }" alt="上传成功后渲染" style="max-width: 196px">
                </c:if>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">修改主图</label>
            <div class="layui-input-block">
                <div class="layui-upload-drag" id="imageDiv">
                    <i class="layui-icon layui-icon-upload-drag"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 196px">
                    </div>
                </div>
                <%-- 用于保存图片回调oss对象名称，并进行表单提交 --%>
                <input type="hidden" name="image" value="${ game.image }">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">游戏简介</label>
            <div class="layui-input-block">
                <div id="content">${ game.content }</div>
                <textarea name="content" class="layui-hide">${ game.content }</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">积分</label>
            <div class="layui-input-block">
                <input type="text" name="credit" value="${ game.credit }" lay-verify="required" lay-reqText="积分不能为空"
                       autocomplete="off"
                       placeholder="请输入购买游戏所获得的积分" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统配置</label>
            <div class="layui-input-block">
                <div id="system">${ game.system }</div>
                <textarea name="system" class="layui-hide">${ game.system }</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="update">修改</button>
                <button type="reset" class="layui-btn layui-btn-danger">清空</button>
            </div>
        </div>
    </form>

</div>

<script type="text/javascript" src="${ bp }/static/layui/layui.all.js"></script>
<script src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery', 'upload'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let upload = layui.upload;

        // 富文本编辑器
        const E = window.wangEditor;
        const editorContent = new E("#content");
        const editorSystem = new E("#system");
        // textarea控件
        let $content = $('[name="content"]');
        let $system = $('[name="system"]');
        // 动态获取内容并赋值
        editorContent.config.onchange = function (html) {
            $content.val(html)
        }
        editorSystem.config.onchange = function (html) {
            $system.val(html)
        }
        // 图片上传接口
        editorContent.config.uploadImgServer = '${ bp }/wangEditor?method=imageUpload';
        editorSystem.config.uploadImgServer = '${ bp }/wangEditor?method=imageUpload';
        // 视频上传接口
        editorContent.config.uploadVideoServer = '${ bp }/wangEditor?method=videoUpload';
        editorSystem.config.uploadVideoServer = '${ bp }/wangEditor?method=videoUpload';
        // 富文本编辑器插件初始化创建
        editorContent.create();
        editorSystem.create();

        // 主图上传插件
        upload.render({
            elem: '#imageDiv',
            url: '${ bp }/file?method=layuiUpload',
            before: function () {
                layer.load(1);
            },
            done: function (res) {
                layer.msg('主图上传成功');
                // 将图片路径设置到img标签并显示预览效果
                $('#uploadView').removeClass('layui-hide').find('img').attr('src','${ bp }/' +  res.data.src);
                // 将图片路径保存到隐藏于用于数据提交
                $('[name="image"]').val(res.data.src);
                layer.closeAll('loading');
            },
            error: function () {
                layer.closeAll('loading');
            }
        });

        // 监听修改表单提交
        form.on('submit(update)', function (data) {

            // 使用ajax请求接口
            $.ajax({
                url: '${ bp }/gameadmin?method=update',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: (result) => {
                    if (result.code === 0) {
                        layer.msg('修改成功', {
                            time: 1000,
                            icon: 1
                        }, function () {
                            // 关闭窗口
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            // 刷新对应模块的table
                            parent.document.getElementById('游戏数据').contentWindow.layui.table.reload('table');
                        });
                    } else {
                        layer.msg(result.msg, {
                            time: 2000,
                            icon: 2
                        });
                    }
                },
                error: () => {
                    console.log('请求接口错误');
                }
            });


        });

    });
</script>

</body>
</html>
